
<!--单个文章展示-->

<template>
    <div style="width: 100%;" class="flex-center">
        <div class="article-item flex-center" :class="{'article-item-hover':model==='push'}">
            <div class="article-image flex-center">
                <router-link :to="{
                    path:'/article',
                    query:{
                        aId:item.aId
                    }
                }">
                    <el-image :src="item.aImage" alt="图片失效" v-show="item.aImage" class="img">
                        <template #error>
                            <div style="width: 100%;height: 100%;background-color: #F5F7FA;color: black"
                                 class="flex-center-col">
                                <i class="el-icon-picture-outline"></i>
                                图片迷路了...
                            </div>
                        </template>
                        <template #placeholder>
                            <div class="image-slot">加载中<span class="dot">...</span></div>
                        </template>
                    </el-image>
                    <img :src="obj.defaultImage" v-show="!item.aImage" >
                </router-link>


            </div>
            <div style="width: 0;border-right: 2px solid grey;height: 150px"></div>

            <div class="article-content flex-center-col">

<!--              ---------------------  标题------------------------->
                <div class="article-title-box flex-center">
                    <div class="article-title">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                :content="item.aTitle"
                                placement="top"
                        >
                           <button >{{item.aTitle}}</button>
                        </el-tooltip>

                    </div>
                    <div v-if="item.aTop===1" style="float: right;font-size: 16px">
                        🔥置顶
                    </div>
                </div>
                <div class="article-text-box">

                    <div class="article-text" >

                        <div v-html="item.aContent.substring(0,300)"></div>
                        <div style="text-align: center;">
                            <strong>
                                . . . . . . .
                            </strong>
                        </div>
                    </div>

                    <div class="article-text-footer">
                        <span>
                            <i class="el-icon-pie-chart"></i>
                            {{ item.aCreateTime }}
                        </span>
                        <span style="">
                           <i class="el-icon-view"></i>

                           {{viewFormat(item.view)}}
                        </span>
                        <span style="overflow: hidden">
                             <i class="el-icon-collection-tag"></i>
                            {{item.tab.tName}}
                        </span>
                        <span>


                            <router-link :to="{
                                path:'/article',
                                query:{
                                    aId:item.aId
                                }
                            }" style="text-decoration: none;color:tomato">
                                查看全文
                            </router-link>
                             <i class="el-icon-right"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import {numberFormat} from "@/assets/js/utils";

    export default {
        name: "ArticleItem",
        props:{
          item:{
              type:Object,
              require:true
          },
          model:{
                type:String,
                default:'default',
                validator:function (value) {
                    return ['default','push'].indexOf(value)!==-1
                }
          }
        },
        setup(){
            let obj=reactive({
                defaultImage:require("/src/assets/default.jpg")
            })

            onMounted(()=>{

            })


            let viewFormat=(view)=>{
                return numberFormat(view)
            }
            return{
                obj,
                viewFormat

            }
        }
    }
</script>

<style scoped lang="less">
    @Article-item-width:300px;
    @Article-item-height:300px;


    .article-item{
        width: @Article-item-width+400px;
        height: @Article-item-height;
        min-width: @Article-item-width;
        background-color: #dcdbdb;
        /*background-color: red;*/
        transition: all 1s;
        .article-image {
            height: 100%;
            width: 200px;


            .img,img {
                object-fit: cover;
                width: 200px;
                height: 200px;
                z-index: 1;
                position: relative;
                left: -30%;
                border-radius: 5px;
                cursor: pointer;
            }

        }
        .article-content{
            width: 500px;
            height: 100%;
            display: flex;
            overflow-wrap: break-word;
            text-overflow:ellipsis;
            transition: all 1s;
            overflow: hidden;
            .article-title-box{

                min-width: 80%;
                height: 20%;
                font-size: 25px;
                max-width: 30px;
                max-height: 90%;

                margin-top: 5%;

                .article-title{
                    width: 85%;
                    button{
                        width: 100%;
                        height: 100%;
                        border: none;
                        background-color:transparent;
                        font-size: 20px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        word-break:break-word;
                    }
                }
            }
            .article-text-box{

                width: 440px;
                min-width: 400px;
                height: 80%;
                color:black;
                margin-left: 35px;



                .article-text{
                    margin:5% 0 0 0;
                    width: 100%;
                    min-width: 100%;
                    height: 70%;
                    text-align: left;
                    overflow: hidden;
                }
                .article-text-footer{

                    width: 100%;
                    height: 22%;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    font-size: 15px;
                    span{
                        margin-right: 20px;
                        line-height: 100%;
                    }
                }
            }
        }

    }

    .article-item:hover{

        animation: breath-shadow 2s infinite alternate;
        .img{
            animation: breath-jump 2s infinite alternate;
        }
        img{
            animation: breath-jump 2s infinite alternate;
        }
    }

    .article-item-hover{
        width: 300px;
        .article-content{
            width: 30px;

        }
    }

    .article-item-hover:hover{
        width: @Article-item-width+400px;
        .article-content{
            width: 500px;
        }
    }

    @keyframes breath-jump {
        0%{

        }
        50%{

            transform: scale(1.05);
        }
        100%{

        }

    }
</style>